<script>
export default {
	name: "my-navbar",
	props: {
		title: {
			type: String,
			default: ""
		},
		showBack: {
			type: Boolean,
			default: true
		},
		showLeft: {
			type: Boolean,
			default: false
		},
		bgColor: {
			type: String,
			default: "#fff"
		},
		textColor: {
			type: String,
			default: "#000"
		},
	},
	methods: {
		back() {
			uni.navigateBack()
		}
	}
}
</script>

<template>
	<view>
		<view class="navbar" :style="{ backgroundColor: bgColor, color: textColor }">
			<view v-if="showBack" class="back" @click="back">
				<image src="/static/image/back-white.png"></image>
			</view>
			<view v-else class="left"></view>
			<view class="title">{{ title }}</view>
			<view class="right"></view>
		</view>
	</view>
</template>

<style scoped lang="scss">
.navbar {
	position: fixed; /* 固定定位 */
	top: 0; /* 顶部位置 */
	left: 0;
	width: 100%; /* 横向铺满 */
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 44px;
	padding: 0 15px;
	z-index: 9999; /* 设置较高的层级 */
	
	.title {
		font-size: 36rpx;
		font-weight: bold;
	}
	
	.back {
		image {
			width: 20px;
			height: 20px;
		}
	}
}
</style>

